<template>
  <!-- 招商管理页面 -->

  <!-- 文章筛选区域 -->
  <el-card>
    <!-- 文章类型筛选区域 -->
    <div class="mt">
      <span class="title">文章类型: </span>
      <!-- 全部选项标签 -->
      <el-tag
        :type="currentIndex[0] === -1 ? 'primary' : 'info'"
        class="mr"
        @click="handleLegacySelectEvents(-1, 0)"
      >
        全部
      </el-tag>
      <!-- 循环渲染文章类型选项 -->
      <el-tag
        v-for="(item, index) in typeList.type"
        :key="index"
        :type="currentIndex[0] === index ? 'primary' : 'info'"
        class="mr"
        @click="handleLegacySelectEvents(index, 0, item)"
      >
        {{ item }}
      </el-tag>
    </div>

    <!-- 重要程度筛选区域 -->
    <div class="mt">
      <span class="title">重要程度: </span>
      <!-- 全部选项标签 -->
      <el-tag
        :type="currentIndex[1] === -1 ? 'primary' : 'info'"
        class="mr"
        @click="handleLegacySelectEvents(-1, 1)"
      >
        全部
      </el-tag>
      <!-- 循环渲染重要程度选项 -->
      <el-tag
        v-for="(item, index) in typeList.important"
        :key="item"
        :type="currentIndex[1] === index ? 'primary' : 'info'"
        class="mr"
        @click="handleLegacySelectEvents(index, 1, item)"
      >
        {{ item }}
      </el-tag>
    </div>

    <!-- 发布渠道筛选区域 -->
    <div class="mt">
      <span class="title">发布渠道: </span>
      <!-- 全部选项标签 -->
      <el-tag
        :type="currentIndex[2] === -1 ? 'primary' : 'info'"
        class="mr"
        @click="handleLegacySelectEvents(-1, 2)"
      >
        全部
      </el-tag>
      <!-- 循环渲染发布渠道选项 -->
      <el-tag
        v-for="(item, index) in typeList.publish"
        :key="item"
        :type="currentIndex[2] === index ? 'primary' : 'info'"
        class="mr"
        @click="handleLegacySelectEvents(index, 2, item)"
      >
        {{ item }}
      </el-tag>
    </div>

    <!-- 分割线 -->
    <el-divider />

    <!-- 已选择条件展示区域 -->
    <div class="mt">
      <span class="title">已选择: </span>
      <!-- 循环展示已选择的筛选条件 -->
      <el-tag
        v-for="(item, index) in selectedList"
        :key="index"
        disable-transitions
        type="success"
        closable
        class="mr"
        @close="handleCloseEvents(item.num)"
      >
        {{ item.name }}
      </el-tag>
    </div>
  </el-card>

  <!-- 导出 HTML 文件按钮 -->
  <el-button type="primary" class="mt" @click="exportToHtml">导出 HTML 文件</el-button>

  <!-- 富文本编辑器区域 - 使用的是 TinyMCE -->
  <el-card class="mt">
    <Editor
      v-model="editorContent"
      api-key="xvbamfm2vokka8qoim9r801qtdlldskjschd51yha7zhuusp"
      :init="{
        language: 'zh_CN', // 设置语言为中文
        plugins: 'lists link image table code help wordcount', // 启用的插件
      }"
    />
  </el-card>

  <!-- 提交文章内容 按钮 -->
  <el-button type="success" class="mt" @click="submitArticle">提交文章内容</el-button>
</template>

<script setup lang="ts">
import { categoryListApi } from "@/api/document";
import { onMounted, ref } from "vue";

// ===================== 请求后端接口逻辑 =====================
/**
 * 类型列表接口定义
 */
interface TypeList {
  type: string[]; // 文章类型数组
  important: string[]; // 重要程度数组
  publish: string[]; // 发布渠道数组
}

// 响应式引用，存储分类数据
const typeList = ref<TypeList>({
  type: [],
  important: [],
  publish: [],
});

/**
 * 获取文章分类列表接口
 */
const getCategoryList = async () => {
  const { data } = await categoryListApi();
  typeList.value = data;
};

// 组件挂载时获取分类数据
onMounted(() => {
  getCategoryList();
});

// ===================== 点击高亮功能逻辑 =====================

/**
 * 定义当前高亮的序号数组
 * 数组索引: 0-文章类型, 1-重要程度, 2-发布渠道
 * 值: -1表示"全部"选项被选中, 其他数字表示对应分类的索引
 */
const currentIndex = ref([-1, -1, -1]);

/**
 * 标签点击事件处理函数
 * @param index - 点击的标签索引
 * @param num - 分类类型(0:文章类型, 1:重要程度, 2:发布渠道)
 * @param name - 可选参数，按钮名称
 */
const handleLegacySelectEvents = (index: number, num: number, name?: string) => {
  // 判断是否传入了按钮名称
  if (name) {
    // 查找是否已有同类型的已选择项
    const hasItem = selectedList.value.find((item: SelectType) => item.num === num);
    if (hasItem) {
      // 如果已有同类型项，则更新名称
      hasItem.name = name;
    } else {
      // 如果没有同类型项，则添加新项
      selectedList.value.push({ name, num });
    }
  } else {
    // 如果点击的是"全部"选项，则删除同类别的已选择项
    const index = selectedList.value.findIndex((item) => item.num === num);
    if (index !== -1) {
      selectedList.value.splice(index, 1); // 从索引 index 位置开始，删除 1个 元素
    }
  }

  // 更新当前高亮的序号
  currentIndex.value[num] = index;
};

// ===================== 已选择功能逻辑 =====================

/**
 * 已选择项的数据结构定义
 */
interface SelectType {
  name: string; // 分类名称
  num: number; // 分类类型标识
}

// 存储已选择的筛选条件
const selectedList = ref<SelectType[]>([]);

/**
 * 删除已选择项的处理函数
 * @param num - 要删除的分类类型标识
 */
const handleCloseEvents = (num: number) => {
  // 查找要删除的项在数组中的索引
  const index = selectedList.value.findIndex((item) => item.num === num);
  if (index !== -1) {
    // 从已选择列表中移除该项
    selectedList.value.splice(index, 1);
    // 将对应分类的高亮状态重置为"全部"
    currentIndex.value[num] = -1;
  }
};

// ===================== 富文本编辑器逻辑 =====================
import Editor from "@tinymce/tinymce-vue"; // 引入 TinyMCE Vue 组件

// 创建富文本编译器的双向绑定数据
const editorContent = ref<string>("");

// ===================== 导出 HTML 文件 逻辑 =====================
// 导出 HTML 文件按钮点击事件处理函数
const exportToHtml = () => {
  // 创建一个 Blob 对象，包含富文本编辑器的内容
  const blob = new Blob([editorContent.value], { type: "text/html" });
  // 创建一个临时的下载链接
  const link = document.createElement("a");
  link.href = URL.createObjectURL(blob);
  link.download = "document.html"; // 设置下载的文件名
  document.body.appendChild(link); // 将链接添加到文档中
  link.click(); // 模拟点击下载
  document.body.removeChild(link); // 下载完成后移除链接
  URL.revokeObjectURL(link.href); // 释放对象 URL
};

// ===================== 提交文章内容 逻辑 =====================

// 提交文章内容按钮点击事件处理函数
const submitArticle = () => {
  // 先拿到当前已选择的分类
  const selectedCategories = selectedList.value.map((item) => item.name);
  // 然后获取富文本编辑器的内容
  const content = editorContent.value;
  // 这里可以将 selectedCategories 和 content 发送到后端 API
  console.log("已选择的分类:", selectedCategories, "文章内容:", content);
};
</script>

<style scoped lang="less">
/* 分类标题样式 */
.title {
  display: inline-block;
  width: 80px;
  font-size: 14px;
}

/* 标签鼠标手势样式 */
.el-tag {
  cursor: pointer;
}
</style>
